<template>
  <div
    class="model-box"
    :class="{
      'c-p': router,
    }"
    :style="{
      width: width + 'px',
      height: height + 'px',
      marginTop: top + 'px',
    }"
    @click="handleRouter"
  >
    <div
      v-if="title"
      class="label"
      :style="{
        backgroundImage: 'url(' + bgImage + ')',
      }"
    >
      {{ title }}
    </div>
    <div class="back-btn c-p" v-if="back" @click="handleBack">返回</div>
    <div
      class="model-content"
      :style="{
        height: (parseInt(height) - 36) + 'px',
        backgroundColor: 'rgba(0, 0, 0, ' + opacity + ')',
        overflow: overflow,
        padding: padding
      }"
    >
      <slot></slot>
    </div>
  </div>
</template>
<script>
import bg1 from "@/assets/home/screen-title-bg.png";
import bg2 from "@/assets/home/screen-title-bg2.png";
export default {
  data() {
    return {
      bgs: [bg1, bg2],
      bgImage: bg1,
    };
  },
  props: {
    // 标题
    title: {
      type: String,
      default: "",
    },
    // 高度
    height: {
      type: [Number, String],
      default: 300,
    },
    // 宽度
    width: {
      type: [Number, String],
      default: 510,
    },
    // 距离顶部
    top: {
      type: [Number, String],
      default: 0,
    },
    // 透明度
    opacity: {
      type: [Number, String],
      default: 0.4,
    },
    // 路由链接
    router: {
      type: String,
      default: "",
    },
    // 显示返回
    back: {
      type: Boolean,
      default: false,
    },
    // 内容溢出
    overflow: {
      type: String,
      default: "auto",
    },
    // 内边距
    padding: {
      type: String,
      default: "24px 10px",
    },
    // 背景图
    bg: {
      type: [Number, String],
      default: 0,
    },
  },
  created() {
    this.bgImage = this.bgs[this.bg];
  },
  methods: {
    // 路由跳转
    handleRouter() {
      if (this.router) {
        this.$router.push(this.router);
      }
    },
    // 返回
    handleBack() {
      this.$router.back();
    },
  },
};
</script>
<style lang="scss" scoped>
.model-box {
  position: relative;
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 100%;
    background: linear-gradient(#416e9d 100px, #80c0ff, #416e9d);
    z-index: 9;
  }
  &::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    background: linear-gradient(#416e9d, #80c0ff, #416e9d);
    z-index: 9;
  }
  .label {
    height: 36px;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: bold;
    font-size: 16px;
    color: #fff;
    letter-spacing: 1px;
    text-shadow: 0px 6px 6px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    padding-left: 50px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .back-btn {
    position: absolute;
    left: 0;
    top: -32px;
    font-family: ZHZKCJSDT;
    color: #45f4ff;
    font-size: 20px;
    font-weight: 900;
  }
  .model-content {
    box-sizing: border-box;
    position: relative;
  }
}
</style>
